<template>
  <el-form :model="form" label-width="130px" :rules="rules" ref="form" style="margin-top: -12px;">
    <el-form-item label="物流设置" class="one-label">

      <el-form-item label="快递运费：" label-width="170px">
        <el-radio-group v-model = "form.templateFlag">
          <el-radio label="1">运费模版</el-radio>
          <el-radio label="0">统一运费</el-radio>
        </el-radio-group>
      </el-form-item>

      <el-form-item label="运费模版：" label-width="170px"  required="true" v-if="form.templateFlag == 1">
        <el-select  placeholder="" v-model="form.templateId">
          <template v-for="area in templateAreas">
            <el-option :key="area.templateName" :label="area.templateName" :value="area.templateId"></el-option>
          </template>
        </el-select>
      </el-form-item>

      <el-form-item label="统一运费：" label-width="170px"  required="true" v-if="form.templateFlag == 0">
        <el-input placeholder="请输入内容" v-model="form.postFee" class="short-input width-per-50"></el-input>
      </el-form-item>

    </el-form-item>
  </el-form>
</template>


<script>
  import { listGoodsTemplate } from '@/api/goods/goods'

  export default {
    props: ['dict'],
    data() {
      return {
        templateAreas: [],
        form: {
          templateFlag: '1',
          templateId: '',
          templateName: '',
          postFee: '',
          goodsStatus: '1'
        },
        rules: {
          postFee: [
            { max: 14, message: '邮费最多输入14 个字符' },
            { required: true, message: '请填写运费', trigger: 'blur' },
            { pattern: /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/, message: '请正确输入邮费' }
          ]
        }
      }
    },
    // 初始化页面
    created() {
      this.initGoodsEdit()
      this.listGoodsTemplate()
    },
    methods: {
      initGoodsEdit() {
        const that = this
        this.$bus.$on('goods.edit.data', function(data) {
          that.form.postFee = that.$utils.isExist(data.postFee) ? data.postFee : '0'
          that.form.goodsStatus = that.$utils.isExist(data.goodsStatus) ? data.goodsStatus + '' : '0'
        })
      },
      listGoodsTemplate() {
        const data = {
          enterpriseId: this.getEnterpriseId()
        }
        listGoodsTemplate(data).then(response => {
          this.templateAreas = response.data
        })
      },
      checkForm() {
        // 需要校验的集合
        const checkArrays = []
        checkArrays.push('postFee')
        let ret = true
        let message = ''
        this.$refs.form.validateField(checkArrays, (valid) => {
          if (valid !== '') {
            message = valid
            ret = false
            return
          }
        })
        if (!ret) {
          this.$message({
            type: 'error',
            message: message
          })
          return false
        }

        this.$refs['form'].validate((valid) => {
          if (valid) {
            ret = true
          }
        })
        return ret
      }
    }
  }
</script>
<style lang="less" scoped>
  .span-bar{
    padding: 0 50px;
  }
  .remove-btn{
    padding: 7px 6px!important;
  }
  .long-input{
    width: 80%;
  }
  .long-input-2{
    width: 55%;
    margin-right: 5%;
  }
  .long-input-3{
    width: 55%;
  }
  .short-input{
    width: 20%;
  }
  .short-input-2{
    width: 25%;
  }
  .default-input{
    width: 50%;
  }
  .tips{
    color: gray;
    font-size: 12px;
    line-height: 1.2;
    padding-top: 5px;
  }
  .picture{
    width: 130px;
    height: 130px;
    display: block;
  }
  .pic-bar{
    position: relative;
    .close-icon{
      position: absolute;
      right: -30px;
      top: -11px;
      width: 31px;
      height: 40px;
      padding: 0 7px;
      cursor: pointer;
    }
    span{
      position: absolute;
      right: 0;
      bottom: 0;
      width: 100%;
      display: block;
      color: #fff;
      text-align: center;
      padding: 3px 0;
      background: rgba(0,0,0,0.5);
      cursor: pointer;
    }
  }
  .pic-add{
    background: #fff;
    border: #d3d3d3 1px dashed;
    border-radius: 5px;
    padding: 0 45px;
  }
</style>
